<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TweenMax</title>
    <style type="text/css">
    .grey{ position: relative; width: 100px; height: 100px; border: 1px solid #DDD; background: #8841AB; }
    </style>
</head>
<body>
    <div class="grey greyA1">greyA1</div>
    <div class="grey greyA2">greyA2</div>
    <div class="grey greyA3">greyA3</div>

    <div class="grey greyB1">greyB1</div>
    <div class="grey greyB2">greyB2</div>

    <div class="grey greyC1">greyC1</div>
    <div class="grey greyC2">greyC2</div>
</body>
<script src="https://www.tweenmax.com.cn/greensock-js/minified/TweenMax.min.js"></script>
<script type="text/javascript">
//TweenMax.staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array
//stagger系列方法为多个目标制作一个有间隔的动画序列，相当于多个TweenMax的数组。
//需要设置每个动画的开始间隔。如不设置则为零，同时开始动画。
//单个元素
const myTweenA1 = TweenMax.staggerFromTo(document.querySelectorAll('.grey'), 1, {opacity:1}, {opacity:0}, 0.5);
</script>
</html>
